<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车加减操作</title>
    <style>
        div {
            width: 160px;
        }

        /* 加 [] 是属性选择器, 因为标签都是input, 但还要分开设置 */
        input[type=text] {
            width: 100px;
            height: 88px;
            outline: none; /*去掉 表单控件焦点框, 这里效果是去除输入框外边的黑框*/
            border: 1px solid #ccc; /* 边框线 */
            /*border-right: 0;*/
            text-align: center; /* 文字水平居中 */
            font-size: 25px; /* 文字大小 */
        }

        input[type=button] {
            height: 48px;
            width: 48px;
            cursor: pointer; /* 鼠标悬停, 改变光标形状 */
        }

        input {
            float: left; /* 浮动布局 */
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="总数" value="1" readonly>
    <input type="button" value="加" id="点加">
    <input type="button" value="减" id="点减" disabled> <!-- disabled设置, 是按钮禁用 -->
</div>

<!--模拟购物车,加减数字-->
<script>
    // 获取DOM元素
    const 总数显示 = document.querySelector('[type="text"]') // [] 属性选择器
    const 加按钮 = document.querySelector('[value="加"]')
    const 减按钮 = document.querySelector('[value="减"]')

    // 监控 鼠标点击事件
    加按钮.addEventListener('click', function () {
        // 这里特别说明: value的值是 字符串类型, 不能直接用来加减运算 要转换数据类型.
        // 这里没有 转换数据类型,是因为 ++操作 隐式转换了数据类型, 所以可以 自增或自减
        总数显示.value++
        减按钮.disabled = false // 按钮禁止属性,解除
    })

    减按钮.addEventListener('click', function () {
        总数显示.value--
        if (总数显示.value <= 1) {
            减按钮.disabled = true // 按钮禁止属性,添加
        }
    })
</script>


</body>
</html>